<template>
	<!-- 需配置bottom的偏移量, 用于底部留白 -->
	<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption">
		<!-- 无更多消息 -->
		<view v-if="isEnd" class="msg-end">没有更多消息了</view>
		
		<!-- 消息列表 (必须配置id,以便定位) -->
		<view class="msg" v-for="msg in msgList" :key="msg.id" :id="msg.VIEW_ID" :class="[msg.id%2==0 ? 'right' : 'left']">
			<view class="msg-warp">
				<view class="msg-title">{{msg.title}}</view>
				<view class="msg-content">{{msg.content}}</view>
			</view>
		</view>
	</mescroll-body>
</template>

<script>
/**
 * 1、mescroll插件市场来源：https://ext.dcloud.net.cn/plugin?id=343
 * 2、官网文档：https://www.mescroll.com/uni.html
 * 3、使用此插件所需要本页面代码外，还需以下三处文件：uni_modules/mescroll-uni、static/mescroll-uni、mescroll-swiper/me-list.vue
 * 4、使用方法指引：
 *    4.1、修改ajax请求网址url；
 *    4.2、列表数据循环元素体：mescroll-swiper/me-list.vue
 *    4.3、容器默认高度是100%，如果要自动高则在<mescroll-body height="auto"...即可
 *    4.4、下拉刷新时执行重置：this.mescroll.resetUpScroll()
 */
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    // 使用mixin（在main.js自动注册全局组件)
    mixins: [MescrollMixin],
    data() {
        return {
            /*mescroll swiper S*/
            //设置api路径
            api_url: 'chat/getMsgList',
            downOption: {
                // 显示下拉刷新的进度条
                autoShowLoading: true,
                // 下拉刷新的文本颜色
                textColor: "#FF8095"
            },
            upOption: {
                // 禁止上拉
                use: false,
                toTop: {
                    // 不显示回到顶部按钮
                    src: ''
                }
            },
            // 页码
            pageNum: 1,
            // 每页条数
            pageSize: 20,
            // 是否无消息
            isEnd: false,
            //聊天内容列表
            msgList: [],
            //高度
            //height: 0,
            /*mescroll swiper E*/

            //发送的文字内容
            content: ''
        }
    },
    onLoad() {
        //mescroll的高度定义
        //this.height = uni.getSystemInfoSync().windowHeight - 110 + 'px';
    },
    onShow(){
    },
    methods: {

        /**
         * 瀑布流加载分页，下拉刷新的回调: 其中page.num为当前页从1开始, page.size为每页数据条数（默认10）
         */
        downCallback() {
            //联网加载数据
            this.getMsgList(this.pageNum, this.pageSize).then(data => {
                // 需自行维护页码
                this.pageNum ++;
                // 先隐藏下拉刷新的状态
                this.mescroll.endSuccess();
                // 不满一页,说明已经无更多消息 (建议根据您实际接口返回的总页码数,总消息量,是否有消息的字段来判断)
                if(data.length < this.pageSize){
                    this.isEnd = true; // 标记已无更多消息
                    this.mescroll.lockDownScroll(true); // 锁定下拉
                }
                // 生成VIEW_ID,大写,避免污染源数据
                data.forEach(val=>{
                    val.VIEW_ID = "msg" + val.id // 不以数字开头
                })

                // 获取当前最顶部的VIEW_ID (注意是写在data.concat前面)
                let topMsg = this.msgList[0]

                //设置列表数据
                this.msgList = data.concat(this.msgList); // 注意不是this.msgList.concat

                this.$nextTick(() => {
                    if(this.pageNum <= 2){
                        // 第一页直接滚动到底部 ( this.pageNum已在前面加1 )
                        this.mescroll.scrollTo(99999, 0)
                    }else if(topMsg) {
                        // 保持顶部消息的位置
                        let view = uni.createSelectorQuery().select('#'+topMsg.VIEW_ID);
                        view.boundingClientRect(v => {
                            console.log("节点离页面顶部的距离=" + v.top);
                            this.mescroll.scrollTo(v.top - 70, 0) // 减去上偏移量100
                        }).exec();
                    }
                })

            }).catch(()=>{
                this.pageNum --; // 联网失败,必须回减页码
                this.mescroll.endErr(); // 隐藏下拉刷新的状态
            })
        },
        /**
         * 获取数据
         * @param pageNum
         * @param pageSize
         */
        getMsgList(pageNum, pageSize) {
            return new Promise((resolute, reject)=>{
                //延时一秒,模拟联网
                setTimeout(function() {
                    try {
                        let list = [];
                        //模拟下拉加载更多记录
                        for (let i = 0; i < pageSize; i++) {
                            let msgId = (pageNum - 1) * pageSize + i + 1;
                            let newObj = {
                                id: msgId,
                                title: "【消息" + msgId + "】",
                                content: "内容: 下拉获取聊天记录"
                            };
                            // 此处模拟只有5页的消息 (第5页只有3条)
                            if(pageNum>=5 && i>=3){}else{
                                list.unshift(newObj);
                            }
                        }
                        console.log("page.num=" + pageNum + ", page.size=" + pageSize + ", curPageData.length=" + list.length);
                        //模拟接口请求成功
                        resolute(list);
                    } catch (e) {
                        //模拟接口请求失败
                        reject(e);
                    }
                }, 1000)
            })
        },

    },
}
</script>

<style lang="scss">
/* 无更多消息 */
.msg-end {
    padding: 40rpx 0;
    font-size: 24rpx;
    text-align: center;
    color: #FF8095;
}
/*消息列表*/
.msg {
    margin: 30rpx;
    &.right {
        text-align: right;
    }
    &.left {
        text-align: left;
    }
    .msg-warp {
        width: 50%;
        display: inline-block;
        padding: 30rpx;
        border-radius: 30rpx;
        background-color: #FF8095;
        color: #fff;
        .msg-title {
            margin-left: -12rpx;
            font-size: 32rpx;
            text-align: left;
        }
        .msg-content {
            font-size: 26rpx;
            margin-top: 10rpx;
            text-align: left;
        }
    }
}
</style>